<template>
  <div class="container">
    <video-player
        :options="videoOptions"
        class="video-css"
    >
    </video-player>
<!--    <div>{{vedioUrl}}</div>-->
  </div>
</template>
<script>
import videoPlayer from './VideoPlayer.vue'
export default {
  name: 'videoComponent',
  components:{videoPlayer},
  props:["vedioUrl"],
  data(){
    return{
      videoOptions:{
        //controls配置项决定是否显示默认控件，因为这里要做自定义的控件，就不显示了
        controls:false,
        //fluid配置项根据外层css样式大小，自动填充宽高
        fluid:true,
        //sources配置项配置视频播放源
        sources:[
          {
            //播放源
            // src:require('@/assets/kp.mp4'),
            // src:"http://203.104.39.15:9000/npdxpcwl/Vedio/2024/03/01/bc9e2032.mp4",
            src:this.vedioUrl,
            //视频类型
            type:"video/mp4"
          }
        ],

      }
    }
  },

}
</script>

<style scoped>
.container{
  width: 400px;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 视频宽高由此样式调整 */
.video-css{
  width: 400px;
  height:auto;
}
</style>
